<template>
  <wing-blank class="secondary-category">
    <div class="secondary-category-name">{{ category.name }}</div>
    <lazy-component>
      <van-grid :border="false" :column-num="3" :gutter="4">
        <van-grid-item v-for="thirdCategory in category.children" :key="thirdCategory.id"
                       @click="handleRouteToProductsSearch(thirdCategory)">
          <template #default>
            <van-image height="60px" width="60px" :show-loading="false" :src="thirdCategory.imageUrl" lazy-load/>
            <div class="third-category-name">{{ thirdCategory.name }}</div>
          </template>
        </van-grid-item>
      </van-grid>
    </lazy-component>
  </wing-blank>
</template>

<script>
import * as _ from "lodash"
import { catalog } from "@mall/api-services"
import WingBlank from "@/components/WingBlank"
import { Grid, GridItem, Image } from "vant"

export default {
  name: "SecondaryCategory",
  components: {
    WingBlank,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
  },
  props: {
    category: catalog.Category,
  },
  methods: {
    handleRouteToProductsSearch(category) {
      const { name, searchKeywords } = category
      if (_.isEmpty(searchKeywords)) {
        this.$router.push({
          path: "/products",
          query: {
            name: _.isEmpty(searchKeywords) ? name : _.join(searchKeywords, " "),
          },
        })
      }
    },
  },
}
</script>

<style scoped>
.secondary-category {

}

.secondary-category .secondary-category-name {
  margin-top: 9px;
  font-size: 12px;
}

.secondary-category .third-category-name {
  margin-top: 9px;
  font-size: 12px;
}

.secondary-category >>> .van-grid-item__content {
  padding: 8px;
}
</style>
